<template>
  <div>
    <Header></Header>
    <section class="G_orderBG ">
      <section class="G_orderBG_body common">
        <aside class="G_orderBG_left">
          <!-- 酒店信息 -->
          <div class="order_hotel_info">
            <div class="G_hotel_info">
              <p class="img_right">
                <img src="https://himg1.qunarzz.com/imgs/202202/22/C.h-ES4TZPMdRL6bZ6Z240.jpg" alt="酒店图片">
              </p>
              <div class="cont">
                <p class="name">{{hotelInfo.hotel_name}}</p>
                <p class="info">{{hotelInfo.hotel_address}}</p>
                <p class="bed_type">{{roomInfo.title}}</p>
                <div class="dec clearFix">
                  <p class="item">床型：<span>大床</span> </p>
                  <p class="item">早餐：<span>{{roomInfo.room_eat}}</span> </p>
                  <p class="item">wifi：<span>无wifi</span></p>
                  <p class="item">宽带：<span>有宽带</span></p>
                </div>
              </div>
            </div>
            <div class="order_tips_c">
              <div class="order_tips">
               {{ Time}}日18:00前免费取消
              </div>
            </div>
          </div>
          <!-- 入住信息 -->
          <div class="G_formNormal">
            <h2 class="title">入住信息</h2>
            <el-form ref="form" :model="form" label-width="80px" >
              <el-form-item label="姓名" style="width:50%">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="联系电话" style="width:50%">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
              <el-form-item label="入住人数">
                <el-select v-model="form.region" placeholder="请选择入住人数">
                  <el-option label="1" value="人数一"></el-option>
                  <el-option label="2" value="人数二"></el-option>

                </el-select>
              </el-form-item>
              <el-form-item label="房间编号">
                <el-select v-model="form.roomid" placeholder="请选择房间">
                  <el-option :label="item.room_id" :value="item.room_id" v-for="item in allRoomInfo" :key="item.id" @change="printTime"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="入住日期">
                <el-col :span="11">
                  <el-date-picker type="datetime"  placeholder="选择日期时间" v-model="form.date1" style="width: 100%;"></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="退房日期">
                <el-col :span="11" >
                  <el-date-picker type="datetime"  placeholder="选择日期时间" v-model="form.date2" style="width: 100%;" @change="printTime"></el-date-picker>
                </el-col>
                <span style="margin-left:10px">{{nightNum}}晚</span>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                style="width: 50%;"
                v-model="form.textarea">
              </el-input>
              </el-form-item>

            </el-form>

            <div class="item clearFix">
              <span class="eat">餐食情况:</span>
              <div class="detail_price">
                <div class="price_item">
                  <p class="price_time">{{Time}}日</p>
                  <div class="price_cont">
                    <p class="words">无餐食</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 预订声明 -->
          <div class="G_notice">
            <p class="title">预订声明</p>
            <p class="info">2023年{{Time}}日18:00前未入住，可免费取消。过时后非因法定原因未入住取消将收取您的全额房费。订单需预订方或酒店确认后生效，如未确认的将全额退款至您的付款账户。</p>
            <p class="info">预订服务由Ferry国际旅行社有限公司提供营业执照，住宿服务由酒店提供。</p>
            <p class="info">点击提交订单表示已阅读并同意 <em>个人信息授权协议</em> 、<em>酒店预订服务协议</em> </p>

          </div>
          <!-- 点击预订 -->
          <div class="G-submit">
            <p class="btn" @click="gotoPay">下一步、支付</p>
          </div>
        </aside>
        <aside class="G_orderBG_right">
          <div class="G_pay_online">
            <!-- 右侧账单标题 -->
            <div class="title clearFix">
              <p class="name">在线付款</p>
              <span class="pay_total">{{nightNum===0 ? totalCost:totalPrice}}元</span>
            </div>
            <!-- 房费 -->
            <div class="item clearFix">
              <span class="room_price_info">房费</span>
              <span class="room_price">{{nightNum===0 ? totalCost:totalPrice}}元</span>
            </div>

            <div class="title clearFix">
              <p class="name">离店送</p>
              <!-- <span class="pay_total">$200</span> -->
            </div>
            <!-- 房费 -->
            <div class="item clearFix">
              <span class="room_price_info">送积分</span>
              <span class="room_price">24积分</span>
            </div>
            <div class="price_detail">
              <p class="fold">单价信息</p>
            </div>
            <!-- 订单编号 -->
            <div class="water-mark">编码：<span>G3Evuvt00</span> </div>
          </div>
        </aside>
      </section>
    </section>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/components/Header/index.vue'
import Footer from '@/components/Footer/index.vue'
import { getToday, formatDate, getNightCount } from '@/utils/getToday.js'
import { getHotelInfo, getAllRoomInfoByHotlId } from '@/api/hotel'
import { goPayment, addReserList } from '@/api/payment'
import { mapGetters } from 'vuex'
export default {
  name: 'HotelSystemIndex',
  components: {
    Header,
    Footer
  },
  data () {
    return {
      hotelInfo: {}, // 酒店信息
      roomInfo: {}, // 当前房间信息
      allRoomInfo: [], // 所有房间信息
      Time: getToday(),
      form: {
        name: '',
        region: '', // 入住人数
        date1: '', // 入住日期
        date2: '', // 退房日期
        phone: '',
        roomid: '', // 选择的房间编号
        roomPic: '', // 房间图片
        hotelTitle: '', // 酒店名称
        hotelAddress: '', // 酒店地址
        textarea: '', // 客户留言
        user_id: 1 // 用户id绑定对应订单，以便于以后查询使用 后期登陆后用户信息存放到vuex中获取
      },
      nightNum: 0, // 计算有几个晚上
      totalCost: 0, // 总价格
      payForm: {} // 传给支付宝沙箱的支付信息
    }
  },

  mounted () {
    // 初始化传过来的酒店房间信息
    this.initRoomInfo()
    // 获取所有房间信息
    this.getAllRoomInfo()
  },
  computed: {
    ...mapGetters(['userinfo']),
    totalPrice () {
      return this.roomInfo.room_price * this.nightNum
    }
  },
  watch: {
    totalPrice: {
      handler (newVal, oldVal) {
        // console.log('价格变化', newVal, oldVal)
        this.$set(this.form, 'total_price', newVal)
      }
    }
  },
  methods: {
    async initRoomInfo () {
      const hotelId = this.$route.query.hotel_id
      const { data: res } = await getHotelInfo(hotelId)
      this.hotelInfo = res.data[0]
      this.form = res.data[0]
      this.$set(this.form, 'user_id', 1)
      // console.log(this.form)
      this.roomInfo = this.$route.query
      this.totalCost = this.$route.query.room_price
      this.$set(this.form, 'room_type', this.roomInfo.room_type)
      this.$set(this.form, 'title', this.roomInfo.title)
      this.$set(this.form, 'room_pic', this.roomInfo.room_pic)
    },
    async getAllRoomInfo () {
      const hotelId = this.$route.query.hotel_id
      const { data: res } = await getAllRoomInfoByHotlId(hotelId)
      // console.log(res)
      this.allRoomInfo = res.data
    },
    // 支付  流程先向后台创建一个订单表，然后调用支付接口
    async gotoPay () {
      const formData = this.form
      const { data: res1 } = await addReserList(formData)
      if (res1.code === 200) {
        this.$message.success('订单创建成功,即将跳转支付页面')
        const payForm = res1.data

        // 然后返回一个订单编号，拿到返回的订单编号和title，价格等传给后端生成支付链接
        const { data: res } = await goPayment(payForm)
        if (res.code === 200) {
          window.location.href = res.payUrl
        }
      //
      } else {
        this.$message.error(`订单创建失败,错误原因:${res1.msg}`)
      }
    },
    // 选择好住宿时间就会自动调动这个函数为价格复制一次
    printTime () {
      // console.log(this.form.date1)
      // 获取当前表单中选择的时间
      const date1 = new Date(this.form.date1)
      const date2 = new Date(this.form.date2)
      const datenight = getNightCount(date1, date2)
      this.nightNum = datenight
      // 将表格里面的时间处理好再发给后端
      this.form.date1 = formatDate(date1)
      this.form.date2 = formatDate(date2)

      console.log(this.form)
    }
  }
}
</script>

<style lang="less" scoped>
html {
  box-sizing: border-box;
}

.common {
  width: 1200px;
  margin: 0 auto;
}

.G_orderBG {
  background-color: #f7f7f7;
  overflow: hidden;

  .G_orderBG_body {
    width: 1200px;
    // overflow: hidden;

    .G_orderBG_left {
      float: left;
      width: 845px;

      // 酒店信息
      .order_hotel_info {
        background: #fff;
        margin-bottom: 15px;
        border-radius: 10px;
        padding: 15px 15px;

        .img_right {
          float: right;
          padding: 20px 20px;

          img {
            border-radius: 5px;
            width: 160px;
            height: 116px;
          }
        }

        // 信息界面
        .cont {
          .name {
            font-size: 20px;
            line-height: 28px;
            margin-bottom: 4px;
            font-weight: bold;
          }

          .info {
            font-size: 14px;
            color: #616161;
            line-height: 20px;
            margin-bottom: 16px;
          }

          .bed_type {
            font-size: 16px;
            line-height: 22px;
            margin-bottom: 6px;
            font-weight: bold;
          }

          .dec {
            margin-bottom: 30px;

            .item {
              float: left;
              margin-right: 30px;
              color: #9e9e9e;
              font-size: 14px;
              line-height: 20px;

              span {
                color: #ff714a !important
              }
            }
          }
        }
      }

      // 订单提示
      .order_tips_c {
        border-top: 1px solid #f0f0f0;

        .order_tips {
          // padding: 10px 30px;
          display: inline-block;
          font-size: 14px;
          color: #08b2cc;
        }
      }

      // 入住信息
      .G_formNormal {
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 10px;
        margin-bottom: 15px;

        .title {
          font-size: 20px;
          // padding: 30px 30px 15px;
          padding: 15px;
          line-height: 28px;
        }

        .item {
          float: left;
          padding: 15px;

          .eat {
            vertical-align: top;
          }

          .detail_price {
            display: inline-block;
            max-height: 216px;
            width: 334px;
            overflow-y: auto;

            .price_item {
              float: left;
              margin: 0 1px 0 12px;
              text-align: center;
              font-size: 12px;

              .price_time {
                width: 78px;
                height: 25px;
                line-height: 25px;
                background: #f0f0f0;
                border-radius: 2px 0 0 0;
                color: #616161;
                margin-bottom: 1px;
              }

              .price_cont {
                width: 78px;
                height: 46px;
                background: #f8f8f8;
                border-radius: 0 0 2px 2px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;

                .words {
                  word-break: keep-all;
                  line-height: 15px;
                }
              }
            }
          }
        }
      }

      // 预定说明
      .G_notice {
        // padding: 30px 30px 0 30px;
        padding: 15px;
        background: #fff;
        border-radius: 10px;

        .title {
          font-size: 14px;
          font-weight: bold;
          line-height: 20px;
        }

        .info {
          font-size: 14px;
          line-height: 20px;
          color: #9e9e9e;
          margin-bottom: 15px;

          em {
            color: #08b2cc;
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 15px;
          }
        }
      }

      // 支付
      .G-submit {
        padding: 0 30px 30px 30px;

        .btn {
          cursor: pointer;
          margin: 30px auto 0;
          width: 640px;
          height: 60px;
          line-height: 60px;
          border-radius: 35px;
          text-align: center;
          color: #fff;
          background: #ff714a;
          font-size: 20px;
        }
      }
    }

    // 右侧固定栏目
    .G_orderBG_right {
      float: right;
      width: 340px;
      position: fixed;
      right: 10%;

      .G_pay_online {
        padding: 20px;
        background: #fffcf2;
        border-radius: 10px;
        color: #616161;

        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 5px;

          .name {
            font-weight: bold;
            color: #212121;
            text-align: center;
            font-size: 15px;
          }

          .pay_total {
            float: right;
            color: #ff714a !important;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
          }
        }

        // 房费
        .item {
          position: relative;
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;

          &::before {
            content: '';
            border: 1px #9e9e9e dotted;
            position: absolute;
            bottom: 6px;
            width: 200px;
            left: 0;
          }

          .room_price_info {
            // display: inline;
            float: left;
            font-size: 14px;
            line-height: 20px;
            background: #fffcf2;
            // padding: 0 13px 0 30px;
            position: relative;
            z-index: 2;
          }

          .room_price {
            // display: inline;
            float: right;
            font-size: 15px;
            line-height: 21px;
            padding: 0 20px;
            padding-left: 30px;
            background: #fffcf2;
            position: relative;
            z-index: 2;
          }
        }

        .price_detail {
          padding: 0 30px;
          border-radius: 0 0 10px 10px;

          .fold {
            font-size: 14px;
            color: #616161;
            line-height: 50px;
            text-align: right;
            cursor: pointer;
          }
        }

        .water-mark {
          padding: 0 13px 12px 30px;
          color: #ddd;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
